<template>
  <a-modal :width="600" v-model:visible="showRemovePortfolio" title="移动组合" title-align="start" :mask-closable="false" :on-before-ok="submitData" :ok-loading="submitLoading" @cancel="closedDialog">
    <div class="flex-c">
      <p style="margin: 30px">
        <span class="warningColor">*</span>
        <span>广告组合名称</span>
      </p>
      <a-select v-model="portfolio" allow-clear allow-search @search="handleSearch" :filter-option="false" style="width: 300px" value-key="portfolioId">
        <a-option v-for="(option, s) in optionList" :key="s" :value="option" :label="option.portfolioName" />
      </a-select>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, PropType } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { updateCampaign, getAllPortfoliosList } from '@/api/advert'

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
  })

  const showRemovePortfolio = ref(props.isShow)
  const portfolio = ref()
  const submitLoading = ref(false)
  const optionList = ref<Array<any>>([])

  // 通过关键字查询组合
  function handleSearch(value: string) {
    window.setTimeout(async () => {
      const res: any = await getAllPortfoliosList({ search: value })
      optionList.value = res?.data || []
    }, 1000)
  }
  handleSearch()

  // 关闭
  function closedDialog() {
    portfolio.value = null
    showRemovePortfolio.value = false
    emit('closed')
  }
  // 提交
  async function submitData() {
    if (!portfolio.value?.portfolioId) {
      Message.error('请选择组合')
      return false
    }
    let campaignInfos = props.list.map((el: any) => {
      return {
        campaignId: el.campaignId,
        shopId: el.shopId,
      }
    })
    const res: any = await updateCampaign({
      portfolioName: portfolio.value.portfolioName,
      campaignInfos: campaignInfos,
    })
    if (res) {
      Message.success('设置成功')
      emit('success')
      closedDialog()
    }
  }
</script>
<style lang="less" scoped></style>
